import { PageContainer } from '@ant-design/pro-layout';
import { Drawer, message, Modal, Popconfirm, Space, Table, Upload} from 'antd';
import ProTable, { ActionType } from '@ant-design/pro-table';
import React, { useState} from 'react';
import type { ProColumns } from '@ant-design/pro-table';
import { useRef } from 'react';
import { Button } from 'antd';
import {exportFile} from '@/utils/utils';
import ProForm, { DrawerForm, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import { PlusOutlined } from '@ant-design/icons';

export default () => {
  const [dataList,setDataList] = useState<any>([{}]);
  const [currentRecord,setCurrentRecord] = useState({});
  const [showDetail, setShowDetail] = useState(false);
  const actionRef = useRef<ActionType>();
  const [services,setServices] = useState<any>([{account:'XW2022072004',phone:'18796852361',name:'合肥**医疗科技有限公司',id:'JXS4252',flag:"1"},{account:'XW2022072004',phone:'18796852361',id:'JXS0546',name:'合肥**医疗科技有限公司',flag:"0"}]);
  const [showService, setShowService] = useState(false);
  const [modalVisible,setModalVisible] = useState(false);
  const [fileList1,setFileList1] = useState<any>([]);
  const [fileList2,setFileList2] = useState<any>([]);
  const sColumn: ProColumns[] = [
    {
      title:'客户代码',
      dataIndex: 'id',
      width:100,
    },
    {
      title:'客户名称',
      dataIndex: 'name',
      width:200,
      ellipsis:true,
    },
    {
      title:'订单号',
      dataIndex: 'account',
    },
    {
      title: "操作",
      fixed:'right',
      valueType: 'option',
      render: (text, record:any,_, action) => [
        <Popconfirm title='确定要删除吗?' key='delete' onConfirm={() => {}}><a hidden={modalVisible}>删除</a></Popconfirm>,
      ]
    }
  ]

  //表头信息以及表值设置
  const columns: ProColumns[] = [
    {
      title:'客户代码',
      dataIndex: 'loginName',
      renderText:()=>"JXS4252"
    },
    
    {
      title:'客户名称',
      dataIndex: 'dealerName',
      renderText:()=>"合肥**医疗科技有限公司"
    },
    {
      title:'订单号',
      dataIndex: 'deal2erName',
      renderText:()=>"XW2022072701,XW2022072701"
    },
    {
      title: '创建时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: '更新时间',
      dataIndex: 'date',
      hideInSearch:true,
      renderText:(text:string)=>"2022-07-25"
    },
    {
      title: "操作",
      valueType: 'option',
      render: (text, record:any,_, action) => [
        <a
        key="detail"
        onClick={async() => {
              setShowService(true)
        }}
      >
        详情
      </a>,
        <Popconfirm title="确定删除该凭证吗?" key="delete_area" onConfirm={() => {

      }}>
        <a>删除</a>
      </Popconfirm>
    ]
    }
  ];
  

  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>点击上传</div>
    </div>
  );
  
  return (
    <PageContainer>
    <ProTable
      headerTitle='客户列表'
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      actionRef={actionRef}
      scroll={{x:1200}}
      dataSource = {dataList}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolBarRender={()=>[
        <Button type='primary' key='primary' onClick={() => {
          setShowService(true)
        }}>新增</Button>
      ]}
      toolbar={{settings:[]}}
      />
    
     
       <DrawerForm title='详情' style={{zIndex:-10}} width={1200} onVisibleChange={(v)=>setShowService(v)} visible={showService} 
        drawerProps={
        {forceRender:true,destroyOnClose:true}
        }
       >
          <ProTable pagination={false} search={false} headerTitle="关联订单"  rowKey="id"   dataSource = {services}
            columns={sColumn} toolbar={{settings:[]}} toolBarRender={()=>[
              <Button type='primary' key='primary' hidden={showDetail} onClick={() => {
                setModalVisible(true)
              }}>添加</Button>
            ]}>

          </ProTable>
          <div style={{margin:20}}>
            <h4>凭证附件</h4>
            <Upload
              headers={{
              'authorization':`${sessionStorage.getItem('token')}`}} 
              listType="picture-card"
              fileList={fileList1}
              onChange={(info:any)=>{
                if (info.file.status !== 'uploading') {
                  // console.log(info.file, info.fileList);
                }
              }}
            >
                {uploadButton}
            </Upload>
            <ProForm.Group>
                <ProFormTextArea name="bak" label="备注" width="lg" fieldProps={{showCount:true,maxLength:500}} />
            </ProForm.Group>
          </div>
          
          <Modal
              title="订单列表"
              width={1000}
              visible={modalVisible}
              forceRender={true}
              destroyOnClose={true}
              onOk={()=>{
                setModalVisible(false)
              }}
              onCancel={()=>{
                setModalVisible(false)
              }}
            >
                <ProTable
                    headerTitle='订单列表'
                    pagination={{
                      pageSizeOptions:['20', '100', '500']
                    }}
                    actionRef={actionRef}
                    dataSource = {services}
                    columns={sColumn}
                    rowKey="id"
                    search={{span:8}}
                    toolBarRender={false}
                    toolbar={{settings:[]}}
                    tableAlertOptionRender={({selectedRowKeys,onCleanSelected}) => {
                      return (
                        <Space size={16}>
                          <a key="i2" style={{ marginLeft: 8 }} onClick={onCleanSelected}>
                            取消选择
                          </a>
                        </Space>
                      );
                    }}
                    rowSelection={{
                      selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT],
                    }}
                    />
              
            </Modal>
       </DrawerForm>
      
      
  </PageContainer>
  );
};